<template>
  <scroll-view
    class="product-scroll"
    scroll-y="true"
    @scrolltolower="toLoadMore"
  >
    <view class="product-list">
      <view
        class="product-item"
        v-for="(item, index) in goodsList"
        @click.stop="handleItem(item.id)"
        :key="index"
        :style="[goodsItemSpace]"
      >
        <view class="product-pic">
          <image lazy-load :src="item.cover_pic" mode="aspectFill" />
          <goodsSaleNo
            :imgHeight="'16.8vw'"
            :goodsInfo="item"
            :imgMode="'heightFix'"
          ></goodsSaleNo>
        </view>
        <view class="goods-info">
          <view
            class="goods-title"
            :style="{ color: propsData.params.producNameColor }"
            >{{ item.name }}</view
          >
          <view class="goods-seckill" v-if="item.delivery_rules">
            {{ item.delivery_rules.name }}：{{ item.delivery_rules.times }}
          </view>

          <view
            class="progress"
            v-if="propsData.params.showProgress === '1'"
            :class="[
              item.progress <= 20 ? 'on' : '',
              item.progress >= 100 ? 'finished' : '',
            ]"
          >
            <view class="progress-let">
              <view
                class="line-icon"
                :style="[
                  {
                    left: `${item.progress || 0}%`,
                  },
                ]"
              >
                <i class="iconfont icon-shandian"></i>
              </view>

              <view
                class="line"
                :style="{
                  width: `${item.progress || 0}%`,
                }"
              >
                <view class="line-box">
                  <template v-if="item.progress >= 100"
                    >{{ parseInt(item.seckill_num) }}件抢光啦</template
                  >
                  <template v-else>
                    {{ `${item.progress || 0}%` }}
                  </template>
                </view>
              </view>
            </view>
            <view class="progress-num">仅剩{{ item.seckill_num || 0 }}件</view>
          </view>

          <view class="info-down">
            <view class="price-box">
              <view
                class="price"
                :style="{ color: propsData.params.priceColor }"
              >
                <view>￥</view>
                <view>{{ item.price | priceBeforeZero }}</view>
                <view>{{ item.price | priceAfterZero }}</view>
              </view>
              <view
                class="origin-price"
                v-if="showPrice"
                :style="{ color: propsData.params.originPriceColor }"
                >￥{{ item.original_price || item.price }}</view
              >
            </view>
            <view
              class="goods-sales"
              :style="{ color: propsData.params.saleColor }"
              v-if="showSales"
              >{{ $t("list.sold") + " " + (item.progress || 0) + "%" }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { diyMixin } from "../../mixins/diy";
import goodsSaleNo from "@/components/goodsSaleNo/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    goodsList: {
      type: Array,
      default: [],
    },
    goodsItemSpace: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin], //混入文件
  components: {
    goodsSaleNo,
  },

  computed: {
    showBuyBtn() {
      return this.propsData.params.showBuyBtn;
    },
    showPrice() {
      return this.propsData.params.showPrice;
    },
    showSales() {
      return this.propsData.params.showSales;
    },
  },

  methods: {
    buyBtn(item) {
      this.$emit("clickBuyBtn", { item });
    },
    handleItem(id) {
      this.$emit("toGoodDetail", { id });
    },
    toLoadMore() {
      this.$emit("scrollToEnd");
    },
  },
};
</script>

<style scoped lang="scss">
.product-scroll {
  width: 100%;

  overflow: hidden;

  .product-list {
    width: 100%;
  }
  .product-item {
    display: flex;
    padding: 2.27%;
    background-color: #ffffff;
    border-radius: 1.34vw;
    overflow: hidden;
    .product-pic {
      width: 25.64%;
      height: 24vw;
      border-radius: 1.34vw;
      overflow: hidden;
      margin-right: 3.41%;
      position: relative;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .goods-info {
      width: 69.8%;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .goods-title {
        width: 91.43%;
        height: 42rpx;
        line-height: 42rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: rgba(29, 29, 29, 0.94);
        word-break: break-all;
      }
      .info-down {
        width: 91.43%;
        position: relative;
        margin-top: 0rpx;
        .price-box {
          display: flex;
          align-items: flex-end;
          .price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 600;
            line-height: 1;
            color: #fa2c1b;
            display: flex;
            align-items: flex-end;
            view:nth-child(2) {
              font-size: 38rpx;
            }
          }
          .origin-price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9b9b9b;
            display: inline-block;
            text-decoration: line-through;
            margin-left: 1.67vw;
          }
        }
        .goods-sales {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #9b9b9b;
          margin-top: 2.134vw;
        }
        .buy-btn {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
  .product-item:last-child {
    margin-bottom: 0;
  }
}
.product-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.goods-seckill {
  width: 91.43%;
  display: flex;
  align-items: center;
  height: 40rpx;
  color: #ff5c26;
  font-size: 24rpx;
  overflow: hidden;
}

.progress {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 16rpx;

  &.finished {
    .line-icon {
      display: none;
    }

    .line {
      background: #b6b6b6;
    }
  }

  .progress-let {
    margin-left: 10rpx;
    position: relative;
    flex: 1;
    border-radius: 32px;
    background: #ffe5e2;
    height: 28rpx;

    .line-icon {
      position: absolute;
      z-index: 2;
      top: 50%;
      margin: -20rpx 0 0 -20rpx;
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(
        180deg,
        #ffe975 0%,
        #ffe586 54%,
        #ffca5a 100%
      );
      border-radius: 60px;
      color: red;
    }

    .line {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 32px;
      color: #fff;
      font-size: 24rpx;
      background: #ff1b22;
      overflow: hidden;
    }

    .line-box {
      position: absolute;
      right: 50rpx;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 20rpx;
    }
  }

  &.on {
    .line-box {
      left: 10rpx;
      right: auto;
    }
  }
}

.progress-num {
  margin-left: 20rpx;
  color: #f0250e;
  font-size: 24rpx;
}
</style>
